<template>
	<view class="wrap">
		<view class="main" v-if="hasLoad">
			<view class="swiper-section" v-if="state.slide_list.length > 0">
				<swiper class="swiper-list" :indicator-dots="state.slide_list.length > 1" autoplay circular
					@change="onSwiperChange">
					<swiper-item class="swiper-item" @click="redirect(item.redirect_type, item.redirect_data)"
						v-for="(item, index) in state.slide_list" :key="index">
						<image :src="item.image_url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="b-shop" v-if="shopData">
				<view class="b-cover">
					<image :src="shopData.cover_url" mode="aspectFill"></image>
				</view>
				<view class="b-main">
					<view class="b-title">
						<view class="s-name">{{shopData.name}}</view>
						<view class="s-state f-rest" v-if="shopData.state==0">已休息</view>
						<view class="s-state f-ing" v-else-if="shopData.state==1">营业中</view>
					</view>
					<view class="b-address" v-if="shopData.address" @click="onOpenAddress">
						<view class="s-cont">{{shopData.address}}</view>
						<view class="iconfont icon-direct" v-if="shopData.lat  && shopData.lng"></view>
					</view>
				</view>
				<view class="b-desk">
					<view class="s-tit">桌位号</view>
					<view class="s-desk f-number" @click="onScanCode" v-if="deskData">
						<view class="s-text">{{deskData.number}}</view>
					</view>
					<view class="s-desk f-scan" @click="onScanCode" v-else>
						<view class="iconfont icon-scan"></view>
						<view class="s-cont">扫码</view>
					</view>
				</view>
				<view class="b-more" @click="onChooseShop">
					<view class="iconfont icon-more"></view>
				</view>
			</view>
			<view class="box">
				<view class="box-head">热门食品</view>
				<view class="box-main food-list">
					<food-item v-for="(item, index) in state.food_list" :key="index" :item="item" @show="onShowFood"
						@addCart="onAddCart">
					</food-item>
				</view>
			</view>
			<!-- 扫点餐码 -->
			<scan-desk ref="scanDesk" @bindChange="onDeskChange"></scan-desk>
			<!-- 食品详情 -->
			<food-view ref="foodView" :item="foodData" @addCart="onAddCart"></food-view>
			<!-- 快捷购物车 -->
			<quick-cart ref="quickCart"></quick-cart>
		</view>
	</view>
</template>

<script>
	import {
		getHomeData
	} from '@/service/api/page.js'
	import Util from '@/common/util.js'
	import mixinsJsapi from '@/mixins/jsapi.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth, mixinsJsapi],
		data() {
			return {
				swiperBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				state: null,
				hasLoad: false,
				loadingType: 1,
				loadingText: ''
			}
		},
		computed: {
			shopData() {
				return this.state.shop_data
			},
			deskData() {
				return this.state.desk_data
			}
		},
		onLoad(options) {
			let params = options
			if (options.scene) {
				params = Util.urlDecode(decodeURIComponent(options.scene))
			}
			if (params.sid) {
				this.$store.commit('setShopId', params.sid)
				this.$store.commit('delDeskId')
			}
			if (this.$store.getters.shopId) {
				this.loadHomeData()
			} else {
				if (this.$store.getters.accessToken) {
					uni.reLaunch({
						url: '/pages/shop/index'
					})
				}
			}
		},
		methods: {
			loadHomeData() {
				getHomeData(this.$store.getters.deskId).then(([err, res]) => {
					console.log('getHomeData', err, res)
					if (!err) {
						this.hasLoad = true
						this.loadingType = -1
						this.state = res
						if (!res.desk_data) {
							if (!this.$store.getters.scanDeskTip) {
								this.$store.commit('setScanDeskTip', true)
								setTimeout(() => {
									this.$refs.scanDesk.show()
								}, 500)
							}
						}
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onSwiperChange(e) {
				console.log('onSwiperChange', e)
			},
			onChooseShop(e) {
				uni.navigateTo({
					url: '/pages/shop/index'
				})
			},
			onScanCode() {
				// #ifdef  MP-WEIXIN
				uni.scanCode().then(([err, res]) => {
					console.log('uni.scanCode', err, res)
					if (!err) {
						let urlData = Util.urlDecode(res.path)
						console.log('urlData', urlData)
						if (!urlData || !urlData.scene) {
							return this.$logic.showToast('点餐码不对')
						}
						let sceneData = null
						if (res.path.indexOf('&') !== -1) {
							sceneData = Util.urlDecode(res.path.slice(res.path.indexOf('?scene=') + 7))
						} else {
							sceneData = Util.urlDecode(decodeURIComponent(urlData.scene))
						}
						console.log('sceneData', sceneData)
						if (!sceneData || !sceneData.did) {
							return this.$logic.showToast('点餐码不对')
						}
						this.onDeskChange(sceneData)
					}
				})
				// #endif

				// #ifdef  H5
				const that = this
				wx.scanQRCode({
					needResult: 1,
					success: function(res) {
						console.log('wx.scanQRCode', res)
						let urlData = Util.urlDecode(res.resultStr)
						console.log('urlData', urlData)
						if (!urlData || !urlData.scene) {
							return that.$logic.showToast('点餐码不对')
						}
						let sceneData = null
						if (res.resultStr.indexOf('&') !== -1) {
							sceneData = Util.urlDecode(res.resultStr.slice(res.resultStr.indexOf('?scene=') +
								7))
						} else {
							sceneData = Util.urlDecode(decodeURIComponent(urlData.scene))
						}
						console.log('sceneData', sceneData)
						if (!sceneData || !sceneData.did) {
							return that.$logic.showToast('点餐码不对')
						}
						that.onDeskChange(sceneData)
					}
				})
				// #endif
			},
			onDeskChange(e) {
				this.$store.commit('setDeskId', e.did)
				if (e.sid != this.$store.getters.shopId) {
					this.$store.commit('setShopId', e.sid)
					this.loadHomeData()
				} else {
					this.state.desk_data = {
						id: e.did,
						number: e.number
					}
				}
			},
			onOpenAddress() {
				const shopData = this.state.shop_data
				if (!shopData.lat || !shopData.lng) {
					return
				}
				uni.openLocation({
					latitude: shopData.lat,
					longitude: shopData.lng,
					name: shopData.name,
					address: shopData.address
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding-bottom: 50upx;
	}

	// 搜索
	.search-box {
		padding: 20upx 20upx;
		width: 710upx;
		position: fixed;
		left: 0;
		z-index: 9999;
		background: #dd524d;
		display: flex;
		align-items: center;

		.b-city {
			margin-right: 20upx;
			color: #eee;
			font-size: 32upx;
			font-weight: bold;
		}

		.b-input {
			flex: 1;
			height: 64upx;
			line-height: 64upx;
			color: $font-color-base;
			text-align: center;
			font-size: 28upx;
			border-radius: 20px;
			background: rgba(255, 255, 255, 0.6);
		}
	}

	// 轮播图
	.swiper-section {
		margin: 30upx;

		.swiper-list {
			height: 300upx;

			.swiper-item {
				width: 690upx;
				height: 300upx;

				image {
					width: 690upx;
					height: 300upx;
					border-radius: 10upx;
				}
			}
		}
	}

	.b-shop {
		margin-top: 30upx;
		padding: 30upx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b-cover {
			width: 100upx;
			height: 100upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.b-main {
			margin-left: 20upx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.b-title {
				display: flex;
				align-items: center;

				.s-name {
					font-size: 30upx;
					color: #333;
				}

				.s-state {
					margin-left: 20upx;
					font-size: 28upx;
					color: #666;
					font-weight: bold;

					&.f-rest {
						color: #dd524d;
					}

					&.f-ing {
						color: #FFC300;
					}
				}
			}

			.b-address {
				margin-top: 20upx;
				display: flex;
				align-items: center;

				.s-cont {
					font-size: 26upx;
					color: #666;
				}

				.iconfont {
					margin-left: 10upx;
					font-size: 36upx;
					color: #aaa;
				}
			}
		}

		.b-desk {
			margin-right: 30upx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.s-tit {
				font-size: 26upx;
				color: #333;
			}

			.s-desk {
				margin-top: 20upx;
				font-size: 24upx;
				color: #666;

				&.f-number {}

				&.f-scan {
					display: flex;
					align-items: center;

					.iconfont {
						margin-right: 10upx;
						font-size: 30upx;
					}
				}
			}
		}

		.b-more {
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 40upx;
				color: #999;
			}
		}
	}

	.box {
		margin-top: 30upx;
		background: #fff;

		.box-head {
			padding: 0 30upx;
			height: 100upx;
			line-height: 100upx;
			font-size: 30upx;
			color: #333;
		}

		.box-main {}

		.food-list {
			margin-top: -30upx;
			margin-bottom: 120rpx;

			.food-item {
				padding: 30upx;
				border-bottom: 1upx solid #eee;
			}
		}
	}
</style>